<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>时空回音 - Time Echo</title>
    <!-- Base path removed for local development -->
    
    <!-- 内联关键CSS确保立即显示 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-color: #00d4ff;
            --secondary-color: #ff6b6b;
            --accent-color: #4ecdc4;
            --bg-dark: #0a0e1a;
            --bg-light: #1a1f2e;
            --text-primary: #ffffff;
            --text-secondary: #b8c5d1;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --radius-lg: 12px;
            --transition-normal: 0.3s ease;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-4xl: 2.5rem;
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
        }
        
        body {
            font-family: 'Noto Sans SC', 'Inter', sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            overflow-x: hidden;
            line-height: 1.6;
            min-height: 100vh;
        }
        
        .screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-normal), visibility var(--transition-normal);
            z-index: 1;
        }
        
        .screen.active {
            opacity: 1;
            visibility: visible;
            z-index: 10;
        }
        
        #mainMenu {
            background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1f2e 50%, #2a2f3e 100%);
            position: relative;
            opacity: 1;
            visibility: visible;
        }
        
        .menu-container {
            text-align: center;
            z-index: 2;
            position: relative;
            padding: var(--spacing-xl);
        }
        
        .game-title {
            font-size: var(--font-size-4xl);
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--primary-color);
        }
        
        .game-subtitle {
            font-size: var(--font-size-xl);
            color: var(--text-secondary);
            margin-bottom: var(--spacing-2xl);
            font-weight: 300;
        }
        
        .menu-buttons {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            align-items: center;
        }
        
        .menu-btn {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(78, 205, 196, 0.2));
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: var(--text-primary);
            padding: var(--spacing-md) var(--spacing-2xl);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all var(--transition-normal);
            font-size: var(--font-size-lg);
            font-weight: 500;
            width: 250px;
            backdrop-filter: blur(10px);
        }
        
        .menu-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(78, 205, 196, 0.3));
            border-color: var(--primary-color);
        }
        
        .language-toggle {
            position: fixed;
            top: var(--spacing-lg);
            right: var(--spacing-lg);
            z-index: 1000;
        }
        
        .lang-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }
        
        .lang-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--primary-color);
        }
        
        /* 确保初始显示 */
        #mainMenu.active,
        #mainMenu {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* 粒子系统样式 */
        .particle-canvas {
            display: block;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .particle-canvas:hover {
            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
            transform: scale(1.02);
        }
        
        .particle-scene {
            animation: particleFloat 6s ease-in-out infinite;
        }
        
        @keyframes particleFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }
        
        /* 场景图片容器 */
        .scene-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 50%, #2a2f3e 100%);
        }
        
        /* 兼容旧图片元素 */
        img[src*="images/"] {
            transition: opacity 0.3s ease;
        }
        
        img[src*="images/"]:not([src$=".svg"]) {
            opacity: 0;
        }
        
        .loading-container {
            text-align: center;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(0, 212, 255, 0.3);
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    
    <!-- 移除base href以支持本地直接运行 -->
    <script>
        // 确保在任何环境下都使用相对路径
        console.log('🚀 初始化游戏路径系统...');
        console.log('📜 当前协议:', window.location.protocol);
        console.log('🏠 当前主机:', window.location.hostname);
        
        // 检测运行环境并提供使用建议
        if (window.location.protocol === 'file:') {
            console.warn('⚠️ 检测到文件协议运行，建议使用以下方式：');
            console.warn('1. 双击 start_game.bat 启动');
            console.warn('2. 或使用 Live Server 等工具');
            console.warn('3. 或运行 node server.js');
            
            // 显示运行提示
            setTimeout(() => {
                if (document.querySelector('.menu-container')) {
                    const tip = document.createElement('div');
                    tip.style.cssText = `
                        position: fixed;
                        bottom: 20px;
                        right: 20px;
                        background: rgba(255, 107, 107, 0.9);
                        color: white;
                        padding: 12px 16px;
                        border-radius: 8px;
                        font-size: 14px;
                        z-index: 10000;
                        max-width: 300px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                    `;
                    tip.innerHTML = `
                        <strong>💡 运行提示</strong><br>
                        如果遇到问题，建议：<br>
                        1. 双击 start_game.bat<br>
                        2. 或使用本地服务器运行
                    `;
                    document.body.appendChild(tip);
                    
                    setTimeout(() => {
                        if (tip.parentNode) tip.parentNode.removeChild(tip);
                    }, 8000);
                }
            }, 3000);
        }
        
        // 立即显示主菜单
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM已加载，显示主菜单');
            // 强制显示主菜单，不依赖其他系统
            setTimeout(() => {
                const mainMenu = document.getElementById('mainMenu');
                if (mainMenu) {
                    mainMenu.classList.add('active');
                    mainMenu.style.opacity = '1';
                    mainMenu.style.visibility = 'visible';
                    mainMenu.style.display = 'flex';
                    mainMenu.style.position = 'fixed';
                    mainMenu.style.top = '0';
                    mainMenu.style.left = '0';
                    mainMenu.style.width = '100vw';
                    mainMenu.style.height = '100vh';
                    mainMenu.style.zIndex = '10';
                    console.log('✓ 主菜单已强制显示');
                    
                    // 确保所有按钮可见
                    const buttons = mainMenu.querySelectorAll('.menu-btn');
                    buttons.forEach(btn => {
                        btn.style.display = 'flex';
                        btn.style.opacity = '1';
                        btn.style.visibility = 'visible';
                        btn.style.pointerEvents = 'auto';
                    });
                    console.log('✓ 所有按钮已强制显示');
                }
                
                // 隐藏加载界面
                const loadingScreen = document.getElementById('loadingScreen');
                if (loadingScreen) {
                    loadingScreen.style.display = 'none';
                    loadingScreen.classList.remove('active');
                }
            }, 100);
        });
        
        // 立即可用的按钮事件处理函数
        function handleNewGame() {
            console.log('点击了开始新游戏');
            alert('欢迎来到《时空回音》！\n\n这是一个多元宇宙互动冒险游戏，\n你将扮演一名量子物理研究员，\n在时空探索中做出选择，\n影响故事的发展方向！\n\n点击确定开始游戏。');
            // 确保游戏系统已加载
            if (window.uiManager && window.gameEngine) {
                window.uiManager.handleNewGame();
            } else {
                // 如果系统未加载，等待加载完成
                setTimeout(() => {
                    if (window.uiManager) {
                        window.uiManager.handleNewGame();
                    } else {
                        alert('游戏系统正在加载中，请稍后再试...');
                    }
                }, 2000);
            }
        }
        
        function handleContinueGame() {
            console.log('点击了继续游戏');
            if (window.uiManager) {
                window.uiManager.handleContinueGame();
            } else {
                alert('没有找到存档数据，请先开始新游戏！');
            }
        }
        
        function showAchievements() {
            console.log('点击了成就');
            // 显示成就界面
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => screen.classList.remove('active'));
            
            const achievementsScreen = document.getElementById('achievementsScreen');
            if (achievementsScreen) {
                achievementsScreen.classList.add('active');
                // 如果成就系统存在，更新显示
                if (window.achievementSystem) {
                    window.achievementSystem.updateAchievementsDisplay();
                }
            } else {
                alert('成就系统：\n\n★ 初次选择 - 做出你的第一个重要选择\n★ 科学家之路 - 选择科学和研究的道路\n★ 勇敢探索者 - 勇于探索未知的领域\n★ 谨慎生存者 - 优先考虑安全和生存\n\n共有50+个成就等待解锁！');
            }
        }
        
        function showTimeline() {
            console.log('点击了时间线');
            // 显示时间线界面
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => screen.classList.remove('active'));
            
            const timelineScreen = document.getElementById('timelineScreen');
            if (timelineScreen) {
                timelineScreen.classList.add('active');
                // 如果进度跟踪系统存在，更新数据
                if (window.progressTracker) {
                    window.progressTracker.updateTimelineDisplay();
                }
            } else {
                alert('时间线系统：\n\n当前进度：\n• 完成章节：0/5\n• 探索分支：0/145+\n• 解锁结局：0/20\n• 总游戏时间：0分钟\n\n开始游戏后将自动记录你的探索进度！');
            }
        }
        
        function showSettings() {
            console.log('点击了设置');
            // 显示设置界面
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => screen.classList.remove('active'));
            
            const settingsScreen = document.getElementById('settingsScreen');
            if (settingsScreen) {
                settingsScreen.classList.add('active');
                // 如果设置系统存在，更新界面
                if (window.gameSettings) {
                    window.gameSettings.updateSettingsUI();
                }
            } else {
                alert('游戏设置：\n\n• 支持中英双语切换\n• 可调节文字显示速度\n• 支持自动保存\n• 高对比度模式\n• 无障碍访问支持\n\n游戏完全加载后可使用所有设置功能。');
            }
        }
        
        function handleFireworks() {
            console.log('点击了烟花');
            if (window.fireworksSystem) {
                window.fireworksSystem.launchRandomFirework();
            } else {
                alert('烟花系统：\n\n✨ 9种绝美烟花效果\n✨ 互动式体验\n✨ 点击空白处放烟花\n✨ 选择不同类型的烟花\n\n游戏完全加载后可体验所有烟花效果！');
            }
        }
        
        function showFeatures() {
            console.log('点击了游戏特色');
            // 显示游戏特色界面
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => screen.classList.remove('active'));
            
            const featuresScreen = document.getElementById('featuresScreen');
            if (featuresScreen) {
                featuresScreen.classList.add('active');
            } else {
                alert('《时空回音》游戏特色：\n\n🌌 多元宇宙探索 - 145+个分支故事\n🏆 成就系统 - 50+个成就等待解锁\n🎆 烟花系统 - 9种绝美烟花效果\n🌍 多语言支持 - 支持10种语言\n🎯 多种结局 - 20个独特结局\n💾 高级存档 - 多存档位和自动保存\n\n每个选择都会影响你的角色成长和故事走向！');
            }
        }
        
        // 返回主菜单函数
        function showMainMenu() {
            console.log('返回主菜单');
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => screen.classList.remove('active'));
            
            const mainMenu = document.getElementById('mainMenu');
            if (mainMenu) {
                mainMenu.classList.add('active');
            }
        }
    </script>
    <!-- 确保所有资源路径正确 -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 语言切换按钮 -->
    <div class="language-toggle">
        <button id="langToggle" class="lang-btn" aria-label="切换语言 / Switch Language" role="button" tabindex="0">EN</button>
    </div>

    <!-- 主菜单 -->
    <div id="mainMenu" class="screen active">
        <div class="menu-container">
            <h1 class="game-title" data-i18n="title">时空回音</h1>
            <h2 class="game-subtitle" data-i18n="subtitle">Time Echo</h2>
            <div class="menu-buttons">
                <button class="menu-btn" id="newGameBtn" data-i18n="newGame" aria-label="开始新的时空冒险" role="button" tabindex="0" onclick="handleNewGame()">开始新游戏</button>
                <button class="menu-btn" id="continueBtn" data-i18n="continue" aria-label="继续之前的游戏进度" role="button" tabindex="0" onclick="handleContinueGame()">继续游戏</button>
                <button class="menu-btn" id="achievementsBtn" data-i18n="achievements" aria-label="查看已解锁的成就" role="button" tabindex="0" onclick="showAchievements()">成就</button>
                <button class="menu-btn" id="timelineBtn" data-i18n="timeline" aria-label="查看故事时间线" role="button" tabindex="0" onclick="showTimeline()">时间线</button>
                <button class="menu-btn" id="settingsBtn" data-i18n="settings" aria-label="游戏设置" role="button" tabindex="0" onclick="showSettings()">设置</button>
                <button class="menu-btn" id="fireworksBtn" data-i18n="fireworks" aria-label="烟花效果" role="button" tabindex="0" onclick="handleFireworks()">烟花</button>
                <button class="menu-btn" id="featuresBtn" data-i18n="features" aria-label="游戏特色介绍" role="button" tabindex="0" onclick="showFeatures()">游戏特色</button>
            </div>
        </div>
        <div class="bg-particles"></div>
    </div>

    <!-- 游戏界面 -->
    <div id="gameScreen" class="screen">
        <div class="game-container">
            <!-- 角色属性面板 -->
            <div class="character-panel" id="characterPanel">
                <div class="character-avatar">
                    <div class="avatar-icon">🔬</div>
                </div>
                <div class="character-attributes">
                    <div class="attribute-item">
                        <span class="attribute-label" data-i18n="scientific">科学</span>
                        <div class="attribute-bar">
                            <div class="attribute-fill" id="scientificAttr" style="width: 50%"></div>
                        </div>
                        <span class="attribute-value" id="scientificValue">50</span>
                    </div>
                    <div class="attribute-item">
                        <span class="attribute-label" data-i18n="courage">勇气</span>
                        <div class="attribute-bar">
                            <div class="attribute-fill" id="courageAttr" style="width: 50%"></div>
                        </div>
                        <span class="attribute-value" id="courageValue">50</span>
                    </div>
                    <div class="attribute-item">
                        <span class="attribute-label" data-i18n="caution">谨慎</span>
                        <div class="attribute-bar">
                            <div class="attribute-fill" id="cautionAttr" style="width: 50%"></div>
                        </div>
                        <span class="attribute-value" id="cautionValue">50</span>
                    </div>
                    <div class="attribute-item">
                        <span class="attribute-label" data-i18n="empathy">同理心</span>
                        <div class="attribute-bar">
                            <div class="attribute-fill" id="empathyAttr" style="width: 50%"></div>
                        </div>
                        <span class="attribute-value" id="empathyValue">50</span>
                    </div>
                </div>
                <div class="character-type">
                    <span class="type-label" data-i18n="characterType">角色类型</span>
                    <span class="type-value" id="characterTypeValue" data-i18n="researcher">研究者</span>
                </div>
            </div>

            <!-- 故事显示区域 -->
            <div class="story-panel">
                <div class="scene-image">
                    <div id="sceneImg" class="scene-image-container" style="min-height: 400px;"></div>
                </div>
                <div class="story-text">
                    <h3 id="sceneTitle" class="scene-title"></h3>
                    <p id="storyContent" class="story-content"></p>
                </div>
            </div>

            <!-- 选择按钮区域 -->
            <div class="choices-panel">
                <div id="choicesContainer" class="choices-container"></div>
                <div class="choice-preview" id="choicePreview" style="display: none;">
                    <h4 data-i18n="possibleOutcome">可能的后果</h4>
                    <p id="choicePreviewText"></p>
                    <div class="attribute-changes" id="attributeChanges"></div>
                </div>
            </div>

            <!-- 游戏UI -->
            <div class="game-ui">
                <div class="ui-left">
                    <button id="menuBtn" class="ui-btn" data-i18n="menu" aria-label="游戏菜单" role="button" tabindex="0">菜单</button>
                    <button id="saveBtn" class="ui-btn" data-i18n="save" aria-label="保存游戏" role="button" tabindex="0">保存</button>
                    <button id="toggleCharacterPanelBtn" class="ui-btn" data-i18n="characterPanel" aria-label="显示隐藏角色面板">角色</button>
                </div>
                <div class="ui-center">
                    <div class="quick-save-slots">
                        <button class="save-slot" id="quickSave1" data-slot="1" aria-label="快速存档槽1">1</button>
                        <button class="save-slot" id="quickSave2" data-slot="2" aria-label="快速存档槽2">2</button>
                        <button class="save-slot" id="quickSave3" data-slot="3" aria-label="快速存档槽3">3</button>
                    </div>
                </div>
                <div class="ui-right">
                    <div class="progress-indicator">
                        <span data-i18n="chapter">章节</span> <span id="chapterNum">1</span>
                        <div class="chapter-progress">
                            <div class="progress-bar">
                                <div class="progress-fill" id="chapterProgress" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 成就界面 -->
    <div id="achievementsScreen" class="screen">
        <div class="achievements-container">
            <div class="achievements-header">
                <h2 data-i18n="achievements">成就</h2>
                <div class="achievements-progress">
                    <div class="progress-circle" id="achievementProgressCircle">
                        <span class="progress-text" id="achievementProgressText">0%</span>
                    </div>
                    <div class="progress-info">
                        <span data-i18n="unlockedAchievements">已解锁</span>: <span id="unlockedCount">0</span>/<span id="totalAchievements">50+</span>
                    </div>
                </div>
            </div>
            <div class="achievement-categories">
                <button class="category-btn active" data-category="all" data-i18n="allCategories">全部</button>
                <button class="category-btn" data-category="story" data-i18n="storyAchievements">剧情</button>
                <button class="category-btn" data-category="exploration" data-i18n="explorationAchievements">探索</button>
                <button class="category-btn" data-category="collection" data-i18n="collectionAchievements">收集</button>
                <button class="category-btn" data-category="hidden" data-i18n="hiddenAchievements">隐藏</button>
            </div>
            <div id="achievementsList" class="achievements-list"></div>
            <div class="achievements-actions">
                <button class="action-btn" id="shareAchievementBtn" data-i18n="shareAchievement">分享成就</button>
                <button class="action-btn" id="resetAchievementsBtn" data-i18n="resetAchievements">重置成就</button>
            </div>
            <button class="back-btn" data-i18n="back" aria-label="返回主菜单" role="button" tabindex="0" onclick="showMainMenu()">返回</button>
        </div>
    </div>

    <!-- 时间线界面 -->
    <div id="timelineScreen" class="screen">
        <div class="timeline-container">
            <h2 data-i18n="timeline">时间线</h2>
            <div class="progress-overview">
                <div class="progress-stats">
                    <div class="stat-item">
                        <span class="stat-label" data-i18n="chaptersCompleted">完成章节</span>
                        <span class="stat-value" id="chaptersCompletedValue">0/5</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label" data-i18n="branchesExplored">探索分支</span>
                        <span class="stat-value" id="branchesExploredValue">0/145+</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label" data-i18n="endingsUnlocked">解锁结局</span>
                        <span class="stat-value" id="endingsUnlockedValue">0/20</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label" data-i18n="totalPlaytime">总游戏时间</span>
                        <span class="stat-value" id="totalPlaytimeValue">0分钟</span>
                    </div>
                </div>
                <div class="progress-chart">
                    <canvas id="progressChart" width="400" height="200"></canvas>
                </div>
            </div>
            <div id="timelineVisualization" class="timeline-viz">
                <div class="story-branch-tree" id="storyBranchTree">
                    <!-- 动态生成故事分支树 -->
                </div>
            </div>
            <button class="back-btn" data-i18n="back" aria-label="返回主菜单" role="button" tabindex="0" onclick="showMainMenu()">返回</button>
        </div>
    </div>

    <!-- 游戏特色介绍界面 -->
    <div id="featuresScreen" class="screen">
        <div class="features-container">
            <h2 data-i18n="gameFeatures">游戏特色</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🌌</div>
                    <h3 data-i18n="multiverse">多元宇宙探索</h3>
                    <p data-i18n="multiverseDesc">145+个分支故事，每个选择都影响后续剧情</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🏆</div>
                    <h3 data-i18n="achievements">成就系统</h3>
                    <p data-i18n="achievementsDesc">50+个成就等待解锁，增加重玩价值</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎆</div>
                    <h3 data-i18n="fireworks">烟花系统</h3>
                    <p data-i18n="fireworksDesc">9种绝美烟花效果，互动式体验</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🌍</div>
                    <h3 data-i18n="languages">多语言支持</h3>
                    <p data-i18n="languagesDesc">支持10种语言，完整本地化体验</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3 data-i18n="endings">多种结局</h3>
                    <p data-i18n="endingsDesc">20个独特结局，探索不同的命运轨迹</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💾</div>
                    <h3 data-i18n="saveSystem">高级存档</h3>
                    <p data-i18n="saveSystemDesc">多存档位和自动保存功能</p>
                </div>
            </div>
            <div class="developer-note">
                <h3 data-i18n="developerNote">开发者的话</h3>
                <p data-i18n="developerMessage">《时空回音》是一个充满想象力的多元宇宙探索体验。每个选择都会引导你走向不同的命运，发现无限可能性。希望你能在这段时空之旅中找到属于自己的那个结局！</p>
            </div>
            <button class="back-btn" data-i18n="back" aria-label="返回主菜单" role="button" tabindex="0" onclick="showMainMenu()">返回</button>
        </div>
    </div>

    <!-- 设置界面 -->
    <div id="settingsScreen" class="screen">
        <div class="settings-container">
            <h2 data-i18n="settings">设置</h2>
            <div class="settings-options">
                <div class="setting-item">
                    <label data-i18n="textSpeed" for="textSpeed">文字速度</label>
                    <input type="range" id="textSpeed" min="1" max="5" value="3" aria-label="调节文字显示速度">
                    <span class="setting-value" id="textSpeedValue">3</span>
                </div>
                <div class="setting-item">
                    <label data-i18n="soundEnabled" for="soundEnabled">音效</label>
                    <input type="checkbox" id="soundEnabled" checked aria-label="开启或关闭音效">
                </div>
                <div class="setting-item">
                    <label data-i18n="autoSave" for="autoSave">自动保存</label>
                    <input type="checkbox" id="autoSave" checked aria-label="开启或关闭自动保存">
                </div>
                <div class="setting-item">
                    <label data-i18n="highContrast" for="highContrast">高对比度模式</label>
                    <input type="checkbox" id="highContrast" aria-label="开启高对比度模式">
                </div>
                <div class="setting-item">
                    <label data-i18n="reducedMotion" for="reducedMotion">减少动画</label>
                    <input type="checkbox" id="reducedMotion" aria-label="减少动画效果">
                </div>
                <div class="setting-item">
                    <label data-i18n="fontSize" for="fontSize">字体大小</label>
                    <select id="fontSize" aria-label="选择字体大小">
                        <option value="small" data-i18n="small">小</option>
                        <option value="medium" data-i18n="medium" selected>中</option>
                        <option value="large" data-i18n="large">大</option>
                        <option value="xlarge" data-i18n="xlarge">特大</option>
                    </select>
                </div>
            </div>
            <div class="settings-actions">
                <button class="settings-btn" id="exportSaveBtn" data-i18n="exportSave" aria-label="导出存档数据">导出存档</button>
                <button class="settings-btn" id="importSaveBtn" data-i18n="importSave" aria-label="导入存档数据">导入存档</button>
                <button class="settings-btn" id="resetGameBtn" data-i18n="resetGame" aria-label="重置游戏数据">重置游戏</button>
            </div>
            <button class="back-btn" data-i18n="back" aria-label="返回主菜单" role="button" tabindex="0" onclick="showMainMenu()">返回</button>
        </div>
    </div>

    <!-- 加载界面 -->
    <div id="loadingScreen" class="screen">
        <div class="loading-container">
            <div class="loading-spinner"></div>
            <p data-i18n="loading">加载中...</p>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script>
        // 紧急回退処理 - 如果 JavaScript 文件加载失败
        window.addEventListener('error', function(e) {
            if (e.filename && e.filename.includes('.js')) {
                console.error('☠️ JavaScript文件加载失败:', e.filename);
                // 显示简化界面
                document.getElementById('mainMenu').style.display = 'flex';
                document.getElementById('mainMenu').style.opacity = '1';
                document.getElementById('mainMenu').style.visibility = 'visible';
            }
        });
        
        // 立即初始化基础界面
        document.addEventListener('DOMContentLoaded', function() {
            console.log('基础界面初始化');
            const mainMenu = document.getElementById('mainMenu');
            if (mainMenu) {
                mainMenu.style.display = 'flex';
                mainMenu.style.opacity = '1';
                mainMenu.style.visibility = 'visible';
                mainMenu.classList.add('active');
                console.log('✓ 基础主菜单显示');
            }
            
            // 确保所有按钮可见和可点击
            const allButtons = document.querySelectorAll('button');
            allButtons.forEach(btn => {
                btn.style.display = 'block';
                btn.style.opacity = '1';
                btn.style.visibility = 'visible';
                btn.style.pointerEvents = 'auto';
            });
            console.log(`✓ ${allButtons.length}个按钮已强制显示`);
        });
    </script>
    <script src="js/imagePreloader.js" onerror="console.warn('☠️ imagePreloader.js 加载失败')"></script>
    <script src="js/multiLanguageTranslations.js" onerror="console.warn('☠️ multiLanguageTranslations.js 加载失败')"></script>
    <script src="js/i18n.js" onerror="console.warn('☠️ i18n.js 加载失败')"></script>
    <script src="js/fireworksSystem.js" onerror="console.warn('☠️ fireworksSystem.js 加载失败')"></script>
    <script src="js/characterSystem.js" onerror="console.warn('☠️ characterSystem.js 加载失败')"></script>
    <script src="js/progressTracker.js" onerror="console.warn('☠️ progressTracker.js 加载失败')"></script>
    <script src="js/endingGallery.js" onerror="console.warn('☠️ endingGallery.js 加载失败')"></script>
    <script src="js/gameEngine.js" onerror="console.warn('☠️ gameEngine.js 加载失败')"></script>
    <script src="js/storyManager.js" onerror="console.warn('☠️ storyManager.js 加载失败')"></script>
    <script src="js/uiManager.js" onerror="console.warn('☠️ uiManager.js 加载失败')"></script>
    <script src="js/saveSystem.js" onerror="console.warn('☠️ saveSystem.js 加载失败')"></script>
    <script src="js/achievements.js" onerror="console.warn('☠️ achievements.js 加载失败')"></script>
    <!-- 新增扩展系统 -->
    <script src="js/extendedStory.js" onerror="console.warn('☠️ extendedStory.js 加载失败')"></script>
    <script src="js/extendedAchievements.js" onerror="console.warn('☠️ extendedAchievements.js 加载失败')"></script>
    <script src="js/extendedTranslations.js" onerror="console.warn('☠️ extendedTranslations.js 加载失败')"></script>
    <script src="js/endingsManager.js" onerror="console.warn('☠️ endingsManager.js 加载失败')"></script>
    <script src="js/megaStoryExpansion.js" onerror="console.warn('☠️ megaStoryExpansion.js 加载失败')"></script>
    <script src="js/particleImageSystem.js" onerror="console.warn('☠️ particleImageSystem.js 加载失败')"></script>
    <script src="js/gameSettings.js" onerror="console.warn('☠️ gameSettings.js 加载失败')"></script>
    <script src="js/main.js" onerror="console.warn('☠️ main.js 加载失败')"></script>
    
    <!-- 初始化验证脚本 -->
    <script>
        // 等待DOM完全加载后验证系统
        window.addEventListener('load', () => {
            setTimeout(() => {
                console.log('🔍 系统初始化验证:');
                
                // 检查全局对象
                const systems = {
                    'TimeEchoGame': window.timeEchoGame,
                    'UIManager': window.uiManager,
                    'GameEngine': window.gameEngine,
                    'I18n': window.i18n,
                    'AchievementSystem': window.achievementSystem,
                    'StoryManager': window.storyManager,
                    'SaveSystem': window.saveSystem,
                    'ExtendedStoryData': window.extendedStoryData,
                    'ExtendedAchievements': window.extendedAchievements,
                    'ExtendedTranslations': window.extendedTranslations,
                    'EndingsManager': window.endingsManager
                };
                
                let allSystemsReady = true;
                Object.entries(systems).forEach(([name, system]) => {
                    if (system) {
                        console.log(`✓ ${name}: 已加载`);
                    } else {
                        console.error(`❌ ${name}: 未加载`);
                        allSystemsReady = false;
                    }
                });
                
                // 检查按钮元素并强制显示
                const buttons = ['newGameBtn', 'continueBtn', 'achievementsBtn', 'timelineBtn', 'settingsBtn', 'langToggle'];
                buttons.forEach(btnId => {
                    const btn = document.getElementById(btnId);
                    if (btn) {
                        console.log(`✓ 按钮 ${btnId}: 存在`);
                        // 强制显示按钮
                        btn.style.display = 'block';
                        btn.style.opacity = '1';
                        btn.style.visibility = 'visible';
                        btn.style.pointerEvents = 'auto';
                        btn.style.position = 'relative';
                        btn.style.zIndex = '100';
                        // 确保按钮有背景色
                        if (!btn.style.background && !btn.style.backgroundColor) {
                            btn.style.background = 'linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(78, 205, 196, 0.2))';
                            btn.style.border = '1px solid rgba(255, 255, 255, 0.3)';
                        }
                    } else {
                        console.error(`❌ 按钮 ${btnId}: 缺失`);
                    }
                });
                
                // 强制显示主菜单
                const mainMenu = document.getElementById('mainMenu');
                if (mainMenu) {
                    mainMenu.classList.add('active');
                    mainMenu.style.opacity = '1';
                    mainMenu.style.visibility = 'visible';
                    mainMenu.style.display = 'flex';
                    mainMenu.style.position = 'fixed';
                    mainMenu.style.top = '0';
                    mainMenu.style.left = '0';
                    mainMenu.style.width = '100vw';
                    mainMenu.style.height = '100vh';
                    mainMenu.style.zIndex = '10';
                    console.log('✓ 主菜单强制显示');
                }
                
                // 强制显示菜单容器
                const menuContainer = document.querySelector('.menu-container');
                if (menuContainer) {
                    menuContainer.style.opacity = '1';
                    menuContainer.style.visibility = 'visible';
                    menuContainer.style.display = 'block';
                    menuContainer.style.position = 'relative';
                    menuContainer.style.zIndex = '2';
                    console.log('✓ 菜单容器强制显示');
                }
                
                // 强制显示游戏标题
                const gameTitle = document.querySelector('.game-title');
                if (gameTitle) {
                    gameTitle.style.opacity = '1';
                    gameTitle.style.visibility = 'visible';
                    gameTitle.style.display = 'block';
                    console.log('✓ 游戏标题强制显示');
                }
                
                // 强制显示副标题
                const gameSubtitle = document.querySelector('.game-subtitle');
                if (gameSubtitle) {
                    gameSubtitle.style.opacity = '1';
                    gameSubtitle.style.visibility = 'visible';
                    gameSubtitle.style.display = 'block';
                    console.log('✓ 游戏副标题强制显示');
                }
                
                // 强制显示按钮容器
                const menuButtons = document.querySelector('.menu-buttons');
                if (menuButtons) {
                    menuButtons.style.opacity = '1';
                    menuButtons.style.visibility = 'visible';
                    menuButtons.style.display = 'flex';
                    console.log('✓ 按钮容器强制显示');
                }
                
                // 隐藏加载界面
                const loadingScreen = document.getElementById('loadingScreen');
                if (loadingScreen) {
                    loadingScreen.style.display = 'none';
                    loadingScreen.classList.remove('active');
                }
                
                if (allSystemsReady) {
                    console.log('🎉 所有系统初始化成功！');
                } else {
                    console.error('⚠️ 部分系统初始化失败，但主菜单仍可用');
                }
                
                // 显示成功消息
                const successMsg = document.createElement('div');
                successMsg.style.cssText = `
                    position: fixed;
                    top: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: rgba(0, 212, 255, 0.9);
                    color: white;
                    padding: 12px 24px;
                    border-radius: 8px;
                    z-index: 10000;
                    font-weight: 600;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                `;
                successMsg.textContent = '✓ 游戏界面已加载，按钮已可点击！';
                document.body.appendChild(successMsg);
                
                setTimeout(() => {
                    if (successMsg.parentNode) {
                        successMsg.parentNode.removeChild(successMsg);
                    }
                }, 3000);
            }, 1000);
        });
    </script>
</body>
</html>